<template>
  <div class="player-container">
    <!-- 数据展示 -->
    <Datalist
      :arr="videosList"
      :total="total"
      :page-num="pageNum"
      :page-size="pageSize"
      @page-change="pageChange"
    >
      <template #title> 视频管理 </template>
      <template #headerLeft>
        <el-form-item label="" prop="userId">
          <el-input placeholder="请输入视频关键字" v-model="keyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toGetVideosList" icon="Search">搜索</el-button>
          <el-button @click="toReset" icon="Refresh">重置</el-button>
        </el-form-item>
      </template>
      <template #headerRight>
        <div style="width: 100%; display: flex; justify-content: end">
          <el-button @click="shellDialog = true" icon="Document">转换脚本</el-button>
          <el-button type="primary" @click="addDialogOpen" icon="Plus">新增视频</el-button>
        </div>
      </template>
      <template #default>
        <el-table-column prop="id" label="视频ID" width="100" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="desc" label="简介" show-overflow-tooltip />
        <el-table-column prop="performers" label="演员" />
        <el-table-column prop="totalPart" label="总集数" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" fixed="right" width="260" min-width="260">
          <template #default="{ row }">
            <el-button type="primary" link plain @click="toInfo(row)">详情</el-button>
            <el-button type="info" link plain @click="upadteDialogOpen(row)">编辑</el-button>
            <el-button type="success" link icon="VideoPlay" @click="toPlayer(row)">播放</el-button>
            <el-button type="danger" link plain @click="preDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Datalist>
    <!-- 添加对话框 -->
    <el-dialog
      :title="adding ? '新增视频' : '编辑视频'"
      width="500px"
      v-model="addDialog"
      @closed="handleCancel"
    >
      <el-form ref="formRef" :model="form" :rules="formRule" label-width="70px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="总集数" prop="totalPart">
          <el-input :maxLength="5" v-model.number="form.totalPart"></el-input>
        </el-form-item>
        <el-form-item label="演员" prop="performers">
          <el-input v-model="form.performers"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="desc">
          <el-input :rows="8" type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="toCommit(formRef)">提 交</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 代码片段 -->
    <el-dialog class="iScroll" title="转换脚本参考" width="1000px" v-model="shellDialog">
      <ConvertShell />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import Datalist from '@/components/DataList.vue'
import { getVideosList, deleteVideo, addVideo, updateVideo } from '@/api/video/manage'
import { type Action } from 'element-plus'
import ConvertShell from '@/components/video/ConvertShell.vue'

const shellDialog = ref(false)

const router = useRouter()

// 分页参数
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const videosList = ref<Videos[]>([])

function pageChange(num: number, size: number) {
  pageNum.value = num
  pageSize.value = size
  toGetVideosList()
}

const keyword = ref<string>('')

// 获取列表
function toGetVideosList() {
  getVideosList({
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    keyword: keyword.value
  }).then((res) => {
    if (res.code === 200) {
      videosList.value = res.data?.list!
      total.value = res.data?.total!
    }
  })
}

// 重置
function toReset() {
  pageNum.value = 1
  pageSize.value = 10
  keyword.value = ''
  toGetVideosList()
}

// 跳转视频详情页
function toInfo(row: Videos) {
  router.push({
    path: '/video/info',
    query: {
      videoId: row.id
    }
  })
}

// 跳转播放页
function toPlayer(row: Videos) {
  router.push({
    path: '/video/player',
    query: {
      videoId: row.id
    }
  })
}

onMounted(() => {
  toGetVideosList()
})

// 确认删除
function preDel(row: Videos) {
  ElMessageBox.alert('此操作将删除视频,及其对应的文件', '确认删除', {
    autofocus: false,
    showCancelButton: true,
    type: 'error',
    callback: (action: Action) => {
      if (action === 'confirm') {
        deleteVideo(row.id).then((res) => {
          if (res.code === 200) {
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
            toGetVideosList()
          }
        })
      }
    }
  })
}

// 新增模式
const adding = ref(false)

// 添加对话框
const addDialog = ref(false)
// 添加表单
const formRef = ref<FormInstance>()
const form = ref<Videos>({
  id: 0,
  title: '',
  desc: '',
  performers: '',
  totalPart: 0,
  createTime: '',
  updateTime: '',
  cover: ''
})
const formRule = reactive<FormRules<typeof form>>({
  title: { required: true, message: '请输入标题', tirgger: 'blur' },
  totalPart: [
    { required: true, type: 'number', message: '请输入集数(数值)', tirgger: 'blur' },
    { type: 'number', min: 1, message: '数值且大于0', tirgger: 'change' }
  ]
})
// 打开对话框, 设置新增模式
function addDialogOpen() {
  adding.value = true
  addDialog.value = true
}
// 打开对话框, 设置更新模式
function upadteDialogOpen(row: Videos) {
  form.value = row
  adding.value = false
  addDialog.value = true
}
// 取消添加
function handleCancel() {
  addDialog.value = false
  form.value = {
    id: 0,
    title: '',
    desc: '',
    performers: '',
    totalPart: 0,
    createTime: '',
    updateTime: '',
    cover: ''
  }
}

// 添加视频或更新
function toCommit(formRef: FormInstance | undefined) {
  if (!formRef) return
  formRef.validate((vail: boolean) => {
    if (vail) {
      if (adding.value) {
        addVideo(form.value).then((res) => {
          if (res.code === 200) {
            ElMessage({
              message: '新增成功',
              type: 'success'
            })
            handleCancel()
            toGetVideosList()
          }
        })
      } else {
        updateVideo(form.value).then((res) => {
          if (res.code === 200) {
            ElMessage({
              message: '更新成功',
              type: 'success'
            })
            handleCancel()
            toGetVideosList()
          }
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.player-container {
  width: 100%;
  height: 100%;
}
</style>
